<template>
  <div>
    <van-nav-bar title="结算规则" fixed left-arrow @click-left="$utils.back($route.path)" />
    <div class="has-top">
      <van-form ref="subForm" class="mg-25 mt-20">
        <form-item item-name="入驻结算规则">
          <van-field
            readonly
            right-icon="arrow"
            clickable
            name="picker"
            :value="industryText"
            label="所属行业"
            :rules="[{ required: true, message: '请选择行业' }]"
            @click="industryPicker = true"
          />
          <van-popup v-model="industryPicker" position="bottom">
            <van-picker
              item-height="45"
              visible-item-count="4"
              show-toolbar
              title="所属行业"
              :columns="IndustryList"
              @confirm="industryOnConfirm"
              @cancel="industryPicker = false"
            />
          </van-popup>
          <!-- <van-field
            readonly
            right-icon="arrow"
            clickable
            name="picker"
            :value="value"
            label="特殊资质"
            @click="showPicker = true"
          />
          <van-popup v-model="showPicker" position="bottom">
            <van-picker
              show-toolbar
              title="特殊资质"
              :columns="Qualifications"
              @confirm="qualificationsOnConfirm"
              @cancel="showPicker = false"
            />
          </van-popup>-->
          <van-field name="uploader" label="资质照片" :rules="[{ required: true, message: '请上传资质照片' }]">
            <template #input>
              <van-uploader
                v-model="imagesArr"
                max-count="3"
                :after-read="imageAfterRead"
                @delete="deleteImage"
              />
            </template>
          </van-field>
          <p class="upload-text pb-20">上传特殊资质照片</p>
          <mention-text :id="mentionId" />
        </form-item>
        <form-item item-name="服务费">
          <van-field
            v-model="info.ServiceRate"
            type="number"
            class="addPercent"
            name="平台服务费"
            label="平台服务费"
            placeholder="请输入平台服务费比例"
            :rules="[{ required: true, message: ' ' }]"
          />
        </form-item>
        <form-item item-name="分润模式">
          <van-field name="radio" label="模式选择" :rules="[{ required: true, message: '请选择模式' }]">
            <template #input>
              <van-radio-group v-model="info.CashRewardMode" direction="horizontal">
                <van-radio :name="1">
                  模式1.0
                  <template #icon="props">
                    <div :class="[{ 'radio-box-active': props.checked }, 'radio-box']" />
                  </template>
                </van-radio>
                <van-radio :name="2">
                  模式2.0
                  <template #icon="props">
                    <div :class="[{ 'radio-box-active': props.checked }, 'radio-box']" />
                  </template>
                </van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            v-if="info.CashRewardMode==2"
            v-model="info.IntegralRatio"
            type="number"
            class="addPercent"
            name="消费积分比例"
            label="消费积分比例"
            placeholder="请输入消费积分比例"
            :rules="[{ required: true, message: ' ' }]"
          />
          <p v-if="info.CashRewardMode==2" class="upload-text pb-20">请填写会员获得的消费积分比例</p>
        </form-item>
        <div class="btn-box pt-40 pb-60 flex-center">
          <van-button class="br-10 hollow-btn" type="info" @click="handleSubmit(0)">保存草稿</van-button>
          <van-button class="br-10 solid-btn" type="info" @click="handleSubmit(1)">保存并下一步</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import formItem from 'components/formItem'
import mentionText from 'views/merchantPaper/mentionText'
import { AddMerchantSettlementData, GetMerchantApplyData } from 'api/merchantPaper'
import { upLoad } from 'api/upload'

export default {
  components: {
    formItem,
    mentionText
  },
  data() {
    return {
      value: '请选择',
      IndustryList: [
        { id: 1, text: '餐饮' },
        { id: 2, text: '食品生鲜' },
        { id: 3, text: '私立/民营医院/诊所' },
        { id: 4, text: '保健器械/医疗器械/非处方药品' },
        { id: 5, text: '游艺厅/KTV/网吧' },
        { id: 6, text: '机票/机票代理' },
        { id: 7, text: '宠物医院' },
        { id: 8, text: '培训机构' },
        { id: 9, text: '零售批发/生活娱乐/其他' },
        { id: 10, text: '电信运营商/宽带收费' },
        { id: 11, text: '旅行社' },
        { id: 12, text: '宗教组织' },
        { id: 13, text: '房地产/房产中介' },
        { id: 14, text: '共享服务' },
        { id: 15, text: '文物经营/文物复制品销售' },
        { id: 16, text: '拍卖典当' },
        { id: 17, text: '共享服务' }
      ],
      industryPicker: false,
      showPicker: false,
      info: {
        AccountNo: '',
        ServiceRate: 0,
        Industry: '',
        Images: '',
        CashRewardMode: 0,
        IntegralRatio: 0
      },
      industryText: '请选择',
      mentionId: '',
      imagesArr: [],
      tempImageArr: [], // 临时图片数组,用于多图上传/删除,存储/赋值
      accountNo: '',
      done: false
    }
  },
  created() {
    var accountNo = this.$route.query.accountNo
    if (accountNo) {
      this.accountNo = accountNo
      this.GetMerchantApplyData()
    } else {
      this.$toast({
        message: '保存信息前,需要先完成主体信息'
      })
    }
  },
  methods: {
    handleSubmit(val) {
      if (this.accountNo) {
        this.$refs.subForm.validate().then(() => {
          this.info.AccountNo = this.accountNo
          AddMerchantSettlementData(this.info).then(res => {
            if (res) {
              this.$toast.success('操作成功')
              if (val === 1) {
                // 下一步
                this.$router.push({
                  path: '/merchantPaper/bankCount',
                  query: { accountNo: this.accountNo }
                })
              } else {
                this.$router.replace({
                  path: '/merchantPaper',
                  query: { accountNo: this.accountNo }
                })
              }
            }
          })
        })
      } else {
        this.$toast.fail('商户编号是空的')
      }
    },
    // 获取信息
    GetMerchantApplyData() {
      GetMerchantApplyData({
        AccountNo: this.accountNo
      }).then(res => {
        if (res) {
          const _item = res.Data.Settlement
          _item.ServiceRate = res.Data.ServiceRate
          _item.CashRewardMode = res.Data.CashRewardMode
          _item.IntegralRatio = res.Data.IntegralRatio
          this.info = _item
          this.done = res.Data.InputMain
          this.industryText = this.getIndustryText(this.info.Industry)
          if (this.info.Images != null) {
            this.imagesArr = []
            this.info.Images.split('|').forEach(item => {
              this.imagesArr.push({ url: item })
            })
            this.tempImageArr = this.imagesArr
          }
        }
      })
    },
    imageAfterRead(file) {
      if (file) {
        upLoad({
          Content: this.$utils.getCaption(file.content, 'base64,'),
          FileType: this.$utils.getCaption(file.file.type, '/')
        }).then(res => {
          if (res && res.Data) {
            this.tempImageArr.push({ url: res.Data.FullPath })
            this.imagesArr = this.tempImageArr
            var urlArr = []
            this.imagesArr.forEach(item => {
              if (item.url) {
                urlArr.push(item.url)
              }
            })
            this.info.Images = urlArr.join('|')
          } else {
            if (this.imagesArr.length >= 1) {
              this.imagesArr.pop()
            } else {
              this.imagesArr = []
            }
            this.$toast.fail('上传图片失败，请重新上传')
          }
        })
      }
    },
    deleteImage() {
      var urlArr = []
      this.imagesArr.forEach(item => {
        urlArr.push(item.url)
      })
      this.tempImageArr = this.imagesArr
      this.info.Images = urlArr.join('|')
    },
    industryOnConfirm(value) {
      this.info.Industry = value.text
      this.industryText = value.text
      this.mentionId = value.id
      this.industryPicker = false
    },
    getIndustryText(value) {
      for (let index = 0; index < this.IndustryList.length; index++) {
        const element = this.IndustryList[index]
        if (element.text == value) {
          return element.text
        }
      }
      return ''
    }
  }
}
</script>
<style lang="scss" scoped>
.upload-text {
  color: $colorC;
  font-size: 28px;
  background: $colorBg;
  padding-left: 264px;
  margin-top: -30px;
  z-index: 999;
  position: relative;
}
/* 添加百分比符号 */
.addPercent {
  position: relative;
  &:before {
    content: '%';
    position: absolute;
    top: 20px;
    right: 100px;
    display: block;
  }
}
</style>
